<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script src="script.js"> </script>
</head>
<body>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<hr>
<p>这是一个p标签</p>

<p>这个<br>段落<br>演示了分行的效果</p>
<hr>
<a href="https://www.baidu.com">baidu</a>
<hr>
<a href="https://www.baidu.com"> <img src="baidu.png"/> </a>

<hr>

<b> b 定义粗体文本</b>

<hr>

<em>em 定义着重文字</em>

<hr>

<i>i 定义斜体字</i>

<hr>


<small> 定义小号字 </small>

<hr>

<strong> strong 定义加重语气</strong>

<hr>

<sub> 定义下标字 </sub>

<hr>

<sup> 定义上标字</sup>

<hr>

<ins> 定义插入字</ins>

<hr>

<del> 定义删除字</del>

<hr>

<script>
    document.write("hello 2023.09.13");
</script>

<br>

<script>
    document.write("hello world");
</script>
<br>

<script>
    var date = new Date();
    document.write(date.toDateString());
</script>


<h3>JS的 DOM修改元素</h3>
<hr/>
<p id="test"><i>Hello 2024</i></p>

<script>
    var p = document.getElementById("test");
    var msg = p.innerHTML;
    p.innerHTML = " <strong>Hello 2024</strong> "
    //alert("段落的初元素是：\n" +msg);
</script>






<h3>JS的 DOM修改元素属性</h3>
<hr/>
<h4>原始状态</h4>
<img id="id1" src="baidu.png" alt="百度"/>

<h4>使用js修改后src属性后：</h4>
<img id="id2" src="baidu.png" alt="百度"/>

<script>
    var img = document.getElementById("id2");
    img.src = "google.png";
    img.alt = "谷歌";
</script>






<h3>JS的 DOM修改元素的CSS样式</h3>
<hr/>
<p id="test1"> Hello 2024</p>

<script>
    var p =document.getElementById("test1");
    p.style.backgroundColor="orange";
    p.style.color="white";
    p.style.fontWeight="bold";
    p.style.textAlign="center";
</script>

<button onclick="alert('hi')">点我会弹出对话框</button>


<button onclick="test()">点我会弹出对话框     </button>

<script>
    var x3 = Math.floor((0.3 - 0.2) * 100);
    console.log(x3);//B
</script>












</body>
</html>